<template>
	<div class="storage-object-container">
		<el-card shadow="hover" class="mb10" v-auth="'storage:object:list'">
			<el-form :inline="true" :model="search">
				<el-form-item>
					<el-input v-model="search.name" placeholder="请输入文件名关键字" prefix-icon="el-icon-search"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-search" type="primary" @click="onTableSearch()">查询</el-button>
					<el-button icon="el-icon-refresh" @click="onResetSearch()">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card shadow="hover">
			<el-row>
				<el-col :span="24" class="mb15">
					<el-button v-auth="'storage:object:upload'" type="primary" icon="el-icon-upload" @click="onOpenUpload()">上传</el-button>
					<el-button v-auth="'storage:object:remove'" type="primary" class="ml10" icon="el-icon-delete" @click="onTabelRowsDel()" :disabled="tableData.selections.length <= 0">删除</el-button>
				</el-col>
				<el-col :span="24">
					<el-breadcrumb separator="/">
						<el-breadcrumb-item>
							<a @click="onTreadcrumbClick()">Root</a>
						</el-breadcrumb-item>
						<el-breadcrumb-item v-for="(key, k) in tableData.breads" :key="k">
							<a v-if="(tableData.breads.length - 1) != k" @click="onTreadcrumbClick(key)">{{key}}</a>
							<span v-else>{{key}}</span>
						</el-breadcrumb-item>
					</el-breadcrumb>
				</el-col>
			</el-row>
			<el-divider />
			<div v-if="tableData.data.length > 0">
				<el-checkbox-group v-model="tableData.selections">
					<div class="flex-warp">
						<div class="flex-warp-item" v-for="(v, k) in tableData.data" :key="k">
							<div class="flex-warp-item-box">
								<div class="item-img" @click="onTableItemClick(v)">
									<!-- 已知文件 -->
									<el-image v-if="icons.includes(v.suffix)" :src="`/images/filetype/${v.suffix}.png`" class="w100" fit="cover"/>
									<!-- 图片文件 -->
									<el-image v-else-if="v.size > 0 && images.includes(v.suffix)" :src="v.url" :lazy="true" :initial-index="tableData.preImages.indexOf(v.url)" :preview-src-list="tableData.preImages" class="w100" fit="cover"/>
									<!-- 文件目录 -->
									<el-image v-else-if="v.size === 0 && v.key.endsWith('/')" :src="`/images/filetype/dir.png`" class="w100" fit="cover"/>
									<!-- 未知文件 -->
									<el-image v-else :src="`/images/filetype/txt.png`" class="w100" fit="cover"/>
								</div>
								<div class="item-txt">
									<div class="item-txt-title">
										<el-checkbox :label="v.name" :disabled="v.size === 0 && v.key.endsWith('/')"/>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-checkbox-group>
			</div>
			<el-empty v-else description="暂无数据"></el-empty>
			<template v-if="tableData.data.length > 0">
				<el-pagination
					@size-change="onPageSizeChange"
					@current-change="onPageCurrentChange"
					class="mt15"
					:pager-count="5"
					:page-sizes="[10, 20, 30, 40, 50, 60]"
					v-model:current-page="search.pageNum"
					v-model:page-size="search.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="tableData.total"
				>
				</el-pagination>
			</template>
		</el-card>
		<UploadStorage ref="uploadStorageRef" @submit="onTableSearch"></UploadStorage>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted, defineComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import UploadStorage from '/@/views/storage/upload.vue';
import { getStorageList, delStorage } from '/@/api/storage/index';

export default defineComponent({
	name: 'storage',
	components: { UploadStorage },
	setup() {
		const uploadStorageRef = ref();
		const state = reactive({
			search: {
				businessKey: '',
				name: undefined,
				pageNum: 1,
				pageSize: 20,
			},
			tableData: {
				breads: ['Root'],
				preImages: [],
				selections: [],//选中的行数据
				data: [],
				total: 0,
			},
			images: ['bmp','gif','jpg','jpeg','png','ico','webp','svg'],
			icons: [
				'apk',
				'bt',
				'code',
				'dir','doc','docx',
				'exe',
				'file','flash',
				'htm',
				'img',
				'mp3','mp4',
				'pdf','ppt','pptx','psd',
				'ttf','txt',
				'wps',
				'xls','xlsx',
				'zip',
			]
		});
		// 获取对象
		const loadTableData = (params?: object) => {
			getStorageList(Object.assign(state.search, params)).then((res: any) => {
				if(res.code === 0){
					state.tableData.data = res.data;
					state.tableData.total = res.total;
					const breads = state.search.businessKey.split('/').filter(key => key);
					state.tableData.breads = breads;
					state.tableData.selections = [];
					state.tableData.preImages = [];
					state.tableData.data.forEach((v: any) => {
						if(v.size > 0 && state.images.includes(v.suffix)){
							state.tableData.preImages.push(v.url);
						}
					});
				}
			});
		}
		//查询
		const onTableSearch = () => {
			loadTableData(state.search);
		}
		//重置
		const onResetSearch = () => {
			state.search.name = undefined;
			state.search.pageNum = 1;
			state.search.pageSize = 10;
			loadTableData(state.search);
		}
		// 导航文件目录
		const onTreadcrumbClick = (key?: string) => {
			let businessKey = '';
			if(key){
				for(let i = 0; i < state.tableData.breads.length; i++){
					let item = state.tableData.breads[i];
					businessKey += '/' + item;
					if(item === key){
						break;
					}
				}
			}
			loadTableData({'businessKey': businessKey});
		}
		// 当前列表项点击
		const onTableItemClick = (v: any) => {
			if(v.size === 0 && v.key.endsWith('/')){
				loadTableData({businessKey: v.key});
			}
		};
		// 每页显示数据大小改变
		const onPageSizeChange = (val: number) => {
			state.search.pageSize = val;
			loadTableData(state.search);
		};
		// 页码改变
		const onPageCurrentChange = (val: number) => {
			state.search.pageNum = val;
			loadTableData(state.search);
		};
		// 上传对象
		const onOpenUpload = () => {
			uploadStorageRef.value.openDialog({businessKey: state.search.businessKey});
		}
		// 删除选中行
		const onTabelRowsDel = () => {
			const keys: any = [];
			state.tableData.selections.forEach(name => {
				keys.push(state.search.businessKey + name);
			});
			if(keys && keys.length > 0){
				ElMessageBox.confirm('确定删除选中的文件信息吗？', '提示', {
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					delStorage(keys).then((res: any) => {
						if(res.code === 0){
							ElMessage.success('删除成功');
							loadTableData();
						}
					});
				}).catch(() => {});
			}
		};
		// 页面加载时
		onMounted(() => {
			loadTableData()
		});
		return {
			uploadStorageRef,
			onTreadcrumbClick,
			onTableItemClick,
			onPageSizeChange,
			onPageCurrentChange,
			onTableSearch,
			onResetSearch,
			onOpenUpload,
			onTabelRowsDel,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.storage-object-container {
	.flex-warp {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		margin: 0 -5px;
		.flex-warp-item {
			padding: 5px;
			width: 140px;
			.flex-warp-item-box {
				border: 1px solid var(--next-border-color-light);
				width: 100%;
				height: 100%;
				border-radius: 2px;
				display: flex;
				flex-direction: column;
				transition: all 0.3s ease;
				&:hover {
					cursor: pointer;
					border: 1px solid var(--el-color-primary);
					transition: all 0.3s ease;
					box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
					.item-txt-title {
						color: var(--el-color-primary) !important;
						transition: all 0.3s ease;
					}
					.item-img {
						img {
							transition: all 0.3s ease;
							transform: translateZ(0) scale(1.05);
						}
					}
				}
				.item-img {
					width: 100%;
					height: 140px;
					overflow: hidden;
					img {
						transition: all 0.3s ease;
						width: 100%;
						height: 100%;
					}
				}
				.item-txt {
					padding: 8px;
					flex-direction: column;
					.item-txt-title {
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						color: #666;
						transition: all 0.3s ease;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						&:hover {
							color: var(--el-color-primary);
							text-decoration: underline;
							transition: all 0.3s ease;
						}
					}
				}
			}
		}
	}
}
</style>
